<template>
    <div style="width: 100%;height: 100%;">
        <video :id="videoId"></video>
    </div>
</template>
  
<script>
import flvjs from 'flv.js'
export default {
    props: {
        dataset: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data() {
        return {
            player: null,
        }
    },
    computed: {
        videoId() {
            return `video-${this.dataset.id || ''}`
        }
    },
    mounted() {
        this.initVideo()
    },
    beforeDestroy() {
        if (!this.player) return
        this.player.pause()
        this.player.unload()
        this.player.detachMediaElement()
        this.player.destroy()
        this.player = null
    },
    methods: {
        initVideo() {
            if (flvjs.isSupported()) {
                let videoElement = document.getElementById(this.videoId);
                this.player = flvjs.createPlayer({
                    type: 'flv',
                    url: this.dataset.connectionAddress,
                    // url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'
                });
                this.player.attachMediaElement(videoElement);
                this.player.load();
                this.player.play();
            }
        }
    }
}
</script>
  
<style lang="scss" scoped>
.video-con {
    width: 100%;
    height: 100%;
}
</style>
  